header.s-header

  include ../components/c-corner

  .s-header__banner
    .text-center
      picture
        source(srcset="/img/logos/logo-front-end-checklist.webp" type="image/webp")
        source(srcset="/img/logos/logo-front-end-checklist.jpg" type="image/jpeg")
        img.img-logo(src="/img/logos/logo-front-end-checklist.jpg" alt="Front-End Checklist Logo" width="100" height="100")
      h1.font-weight-bold= translation.SITE_NAME
      p.sub-heading= translation.SITE_TAGLINE

  .s-header__media
    ul.s-header__media__list
      li.s-header__media__item
        .fb-like(data-href=translation.URL_WEBSITE data-layout="button_count" data-action="like" data-size="small" data-show-faces="true" data-share="true")
      li.s-header__media__item
        a(href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-text=translation.social.TWITTER_MSG data-via=translation.social.TWITTER_VIA data-hashtags=translation.social.TWITTER_HASHTAGS data-show-count="false")= translation.social.TWEET
      li.s-header__media__item
        a.github-button(href=translation.URL_GITHUB_ROOT data-icon="octicon-star" data-show-count="true" aria-label=translation.social.GITHUB_STAR_MSG)= translation.social.STAR

  //- Add new language manually
  .s-header__lang
    ul.s-header__lang__list
      li.s-header__lang__item
        a(href="/")
          img(src="/img/flags/en.svg" width="20" height="15" alt="English language")
      li.s-header__lang__item
        a(href="/jp")
          img(src="/img/flags/jp.svg" width="20" height="15" alt="Japanese language")
